<template>
	<view class="page">
		<view class="pageH">
			<view class="userInfo dis_f_l_c hyy">
				<view class="logo hyy">
					<image src="~@/static/logo.png" mode=""></image>
				</view>
				<view class="info dis_f_c_c">
					<view class="date" v-if="userinfoStore.userinfo.token">
						<template v-if="userinfoStore.userinfo.deadlineTime">
							<text>权限到期时间：</text>
							<text
								:class="{'expired':userinfoStore.userinfo.expired}">{{userinfoStore.userinfo.deadlineTime}}</text>
						</template>
					</view>
					<view class="loginTip" v-else>
						<text>点击登录</text>
					</view>
				</view>
				<!-- <button class="loginBtn" open-type="getUserInfo" @getuserinfo="loginFun" -->
				<button class="loginBtn" @click="loginFun" v-if="!userinfoStore.userinfo.token">
					<text>点击登录</text>
				</button>
			</view>
		</view>
		<button class="loginBtn" open-type="getPhoneNumber" @getphonenumber="getPhoneFun"
			v-if="!userinfoStore.userinfo.token">
			<text>点击获取手机号</text>
		</button>
		<view class="pageS">
			<view class="list hyy">
				<view class="ul">
					<view class="li dis_f_l_c" @click="computeRecordsFun">
						<view class="left dis_f_c_c">
							<u-icon name="file-text"></u-icon>
						</view>
						<view class="center">
							<text>计算记录</text>
						</view>
						<view class="right">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="li dis_f_l_c" @click="$js.open('/pages/mine/pay')">
						<view class="left dis_f_c_c">
							<u-icon name="rmb-circle" size="28"></u-icon>
						</view>
						<view class="center">
							<text>购买使用权限</text>
						</view>
						<view class="right">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="pageF">

		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow,
		onReachBottom,
		onShareAppMessage
	} from '@dcloudio/uni-app'
	import {
		ref,
		reactive,
		getCurrentInstance
	} from 'vue'
	// 公用方法
	let {
		proxy
	} = getCurrentInstance();
	let $js = proxy.$js;

	import {
		useUserinfoStore
	} from '@/stores/userinfo'
	const userinfoStore = useUserinfoStore();

	// 页面显示
	onShow(() => {
		// 获取用户信息
		$js.getUserInfo();
	})

	// 点击计算记录
	function computeRecordsFun() {
		$js.open("/pages/mine/computeRecords/list");
	}

	// 获取手机号
	function getPhoneFun(e) {
		let phoneCode = e.detail.code;
		uni.login({
			provider: 'weixin', //使用微信登录
			success: (loginRes) => {
				if (loginRes.errMsg == "login:ok") {
					$js.ajax("POST", "/wx/user/login", {
						jscode: loginRes.code,
						code: phoneCode,
					}).then((res) => {
						if (res.code == 200) {
							$js.tiShi("登录成功");
							let token = res.token
							$js.setData("token", token)
							userinfoStore.userinfo.token = token;
							// 获取用户信息
							$js.getUserInfo();
						} else {
							$js.tiShi("登录失败");
							$js.tiShi(res.msg);
						}
					})
				} else {
					$js.tiShi(loginRes.errMsg);
				}
			}
		});
	}

	// 登录
	function loginFun() {
		$js.show("登录中");
		userinfoStore.userinfo.token = "";
		uni.login({
			provider: 'weixin', //使用微信登录
			success: (loginRes) => {
				if (loginRes.errMsg == "login:ok") {
					$js.ajax("POST", "/wx/user/login", {
						jscode: loginRes.code,
					}).then((res) => {
						if (res.code == 200) {
							$js.tiShi("登录成功");
							let token = res.token
							$js.setData("token", token)
							userinfoStore.userinfo.token = token;
							// 获取用户信息
							$js.getUserInfo();
						} else {
							$js.tiShi("登录失败");
							$js.tiShi(res.msg);
						}
					})
				} else {
					$js.tiShi(loginRes.errMsg);
				}
			}
		});
	}

	// 分享
	onShareAppMessage(() => {
		return $js.getShareObjFun();
	})
</script>

<style lang="scss" scoped>
	.page {
		padding: 20rpx 24rpx;
	}

	.pageH {
		margin-bottom: 40rpx;

		.userInfo {
			background: #fff;
			border-radius: 10rpx;
			padding: 20rpx 30rpx;
			height: 200rpx;
			overflow: hidden;
			position: relative;

			.logo {
				flex: none;
				width: 120rpx;
				height: 120rpx;
				border-radius: 60rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.info {
				flex: 1;
				height: 100%;
				font-size: 24rpx;

				.expired {
					color: red;
				}

				.loginTip {
					font-size: 36rpx;
					color: #aaa;
				}
			}

			.loginBtn {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				opacity: 0;
			}
		}
	}

	.pageS {
		.list {
			background: #fff;
			border-radius: 10rpx;
			padding: 10rpx 0;
			margin-bottom: 20rpx;

			.ul {
				padding: 0 24rpx;

				.li {
					height: 80rpx;
					border-bottom: 1px solid #f0f0f0;

					&:last-child {
						border-bottom: none;
					}

					.left {
						width: 60rpx;
						flex: none;
					}

					.center {
						min-width: 0;
						flex: 1;
						font-size: 28rpx;
					}

					.right {
						flex: none;
					}
				}
			}
		}
	}

	.pageF {}
</style>